import { PropType, defineComponent } from 'vue';
import styles from './index.module.<%= css %>';

type ColumnsTs = {
  key: string;
  desc: string;
  render: (_: any, val: number) => string;
};

export default defineComponent({
  props: {
    columns: {
      type: Array as PropType<ColumnsTs[]>,
      default: () => [],
    },
    dataSource: {
      type: Object,
      default: () => {},
    },
    wrapperStyle: {
      type: Object,
      default: () => {},
    },
    titleStyle: {
      type: Object,
      default: () => {},
    },
    subTitleStyle: {
      type: Object,
      default: () => {},
    },
  },

  setup(props) {
    const { wrapperStyle, dataSource, columns, titleStyle, subTitleStyle } = props;
    return () => {
      return (
        <div class={styles['goods-card-stat-bar-comp-wrapper']} style={wrapperStyle}>
          {columns.map((i) => (
            <div key={i.key} class={styles['stat-item']}>
              <span class={styles['title']} style={titleStyle}>
                {i.render && i.render(dataSource, dataSource[i.key])}{' '}
              </span>
              <span class={styles['sub-title']} style={subTitleStyle}>
                {i.desc}
              </span>
            </div>
          ))}
        </div>
      );
    };
  },
});
